import React from "react";
import PropTypes from 'prop-types';
import {
    Descriptions, Badge, PageHeader, Input, Button, Row, Col, Card, message, Popconfirm
} from 'antd';
import './store.less'
import {ProductService, ShopService} from "../eosjs/EosService";
import {DeleteOutlined} from "@ant-design/icons";

class StoreManage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            sid: parseInt(this.props.match.params.sid),
            shopInfo: {
                user: "",
                is_checked: 0,
                description: "",
                picture_url: "",
                shop_name: "",
                tag: "",
                address: "",
                goodsid: []
            },
            product: [],
            newProductName: "",
            newProductDesc: "",
            newProductPic: "",
            newShopName: "",
            newShopDesc: "",
            newShopTag: "",
            newShopPic: "",
            newShopAddress: ""
        };
    }

    // componentWillMount() {
    //     this.getProductInfo();
    //     this.getShopDetail();
    // }

    componentDidMount() {
        this.getProductInfo();
        this.getShopDetail();
    }

    render() {
        return (
            <div className={"store-manage"}>
                <PageHeader
                    className="site-page-header"
                    onBack={() => this.props.history.go(-1)}
                    title="店铺详情"
                    // subTitle="This is a subtitle"
                />
                <Row gutter={24}>
                    <Col span={1}></Col>
                    <Col span={15}>
                        <Descriptions title="店铺信息" layout="vertical" bordered>
                            <Descriptions.Item label="店铺名称">{this.state.shopInfo.shop_name}<Input placeholder="修改店铺名称"
                                                                                                  value={this.state.newShopName}
                                                                                                  onChange={this.ShopNameChange}/></Descriptions.Item>
                            <Descriptions.Item label="店铺简介">{this.state.shopInfo.description}<Input placeholder="修改店铺简介"
                                                                                                    value={this.state.newShopDesc}
                                                                                                    onChange={this.ShopDescChange}/></Descriptions.Item>
                            <Descriptions.Item label="店铺地址">{this.state.shopInfo.address}<Input placeholder="修改店铺地址"
                                                                                                value={this.state.newShopAddress}
                                                                                                onChange={this.ShopAddressChange}/></Descriptions.Item>
                            <Descriptions.Item label="店铺标签">
                                {this.state.shopInfo.tag}
                                <Input placeholder="修改店铺标签"
                                       value={this.state.newShopTag}
                                       onChange={this.ShopTagChange}/>
                            </Descriptions.Item>
                            <Descriptions.Item label="审核是否通过">
                                <Badge status={this.state.shopInfo.is_checked === 1 ? "success" : "processing"}
                                       text={this.state.shopInfo.is_checked === 1 ? "通过审核" : "正在审核"}/>
                            </Descriptions.Item>
                            <Descriptions.Item label="修改图片链接">
                                {/*{this.state.shopInfo.picture_url}*/}
                                <Input placeholder="修改图片链接" value={this.state.newShopPic}
                                       onChange={this.ShopPicChange}/>
                            </Descriptions.Item>
                        </Descriptions>
                        <Button type={"primary"} onClick={this.updateShopInfo}>修改</Button>

                    </Col>
                    <Col span={7}>
                        <Card
                            hoverable
                        >
                            <img alt="example"
                                 src={this.state.shopInfo.picture_url}/>
                        </Card>
                    </Col>
                    <Col span={1}></Col>

                </Row>

                <Row gutter={24}>
                    <Col span={1}></Col>
                    <Col span={22}>
                        <Card
                            title="菜品目录" bordered={false} style={{width: "100%"}}
                        >
                            <Row gutter={24}>
                                {this.state.product.map((value, index) => {
                                    return (
                                        <Col span={8} key={index}>
                                            <Card
                                                title={value.goods_name}
                                                // onClick={this.eraseUserComment.bind(this, value)}
                                                extra={
                                                    <Popconfirm placement="top" title={"是否删除产品：" + value.goods_name}
                                                                onConfirm={this.deleteProduct.bind(this, value.gid)}
                                                                okText="确定" cancelText="取消">
                                                        <Button shape="circle" icon={<DeleteOutlined/>} danger/>
                                                    </Popconfirm>
                                                }
                                                hoverable
                                                cover={<img alt={value.goods_name} src={value.picture_url}/>}
                                            >
                                                简介：{value.description}<br/>
                                                修改菜品名称：<Input placeholder="请输入新的菜品名称" defaultValue={value.goods_name}
                                                              onChange={this.updateProductNameChange.bind(this, index)}/>
                                                修改菜品简介：<Input placeholder="请输入新的菜品简介" defaultValue={value.description}
                                                              onChange={this.updateProductDescChange.bind(this, index)}/>
                                                修改菜品图片：<Input placeholder="请输入新的菜品图片链接" defaultValue={value.picture_url}
                                                              onChange={this.updateProductPicChange.bind(this, index)}/>
                                                <Button
                                                    onClick={this.updateProduct.bind(this, value.gid, this.state.updateProductInfo[index].updateProductName, this.state.updateProductInfo[index].updateProductPic, this.state.updateProductInfo[index].updateProductDesc)}>修改</Button>
                                            </Card>
                                        </Col>

                                    );
                                })}
                            </Row>

                        </Card>
                    </Col>

                    <Col span={1}></Col>
                </Row>

                <Row gutter={24}>
                    <Col span={1}></Col>
                    <Col span={22}>
                        <Descriptions title="添加菜品" layout="vertical" bordered>
                            <Descriptions.Item label="菜品名称"><Input placeholder="请输入菜品名称"
                                                                   onChange={this.newProductNameChange}/></Descriptions.Item>
                            <Descriptions.Item label="菜品简介"><Input placeholder="请输入菜品简介"
                                                                   onChange={this.newProductDescChange}/></Descriptions.Item>
                            <Descriptions.Item label="菜品图片链接"><Input placeholder="请输入菜品图片链接"
                                                                     onChange={this.newProductPicChange}/></Descriptions.Item>
                        </Descriptions>
                        <Button type={"primary"} onClick={this.addProduct}>添加</Button>
                    </Col>
                    <Col span={1}></Col>
                </Row>
            </div>
        );
    }

    // 商品信息
    getProductInfo = () => {
        console.log(this.props.match.params.sid, this.state.sid)
        ProductService.getProducts(this.state.sid, {}, 1, 20).then(res => {
            let updateProductInfo = [];
            for (let i = 0; i < res.rows.length; i++) {
                updateProductInfo.push({
                    updateProductName: res.rows[i].goods_name,
                    updateProductDesc: res.rows[i].description,
                    updateProductPic: res.rows[i].picture_url,
                })
            }
            this.setState({
                product: res.rows,
                updateProductInfo: updateProductInfo
            })
            console.log("商品信息获取！", this.state)

        })
    }
    // 商铺信息
    getShopDetail = () => {
        ShopService.getShops({sid: this.state.sid}, 1, 1).then(res => {
            if (res.rows.length <= 0) {
                this.props.history.push("/error404");
                return;
            }
            this.setState({
                shopInfo: res.rows[0],
                newShopTag: res.rows[0].tag,
                newShopName: res.rows[0].shop_name,
                newShopDesc: res.rows[0].description,
                newShopPic: res.rows[0].picture_url,
                newShopAddress: res.rows[0].address,
            })
            console.log("商铺信息获取！", this.state)
            /*若店主不是当前登录用户，则跳转到错误界面*/
            if (localStorage.getItem("name_account") !== this.state.shopInfo.user) {
                this.props.history.push("/error404")
            }
        })
    }
    ShopTagChange = (e) => {
        this.setState({newShopTag: e.target.value})
    }
    ShopNameChange = (e) => {
        this.setState({newShopName: e.target.value})
    }
    ShopDescChange = (e) => {
        this.setState({newShopDesc: e.target.value})
    }
    ShopPicChange = (e) => {
        this.setState({newShopPic: e.target.value})
    }
    ShopAddressChange = (e) => {
        this.setState({newShopAddress: e.target.value})
    }

    updateShopInfo = () => {
        ShopService.updateShop(this.state.sid, this.state.newShopName, this.state.newShopPic, this.state.newShopDesc, this.state.newShopTag, this.state.newShopAddress).then(res => {
            message.success("店铺信息修改成功！");
            this.props.history.push("/myStore/" + this.state.sid);
        })
    }
    newProductNameChange = (e) => {
        this.setState({newProductName: e.target.value})
    }
    newProductDescChange = (e) => {
        this.setState({newProductDesc: e.target.value})
    }
    newProductPicChange = (e) => {
        this.setState({newProductPic: e.target.value})
    }

    // 添加产品
    addProduct = () => {
        console.log(this.state)
        ProductService.insertProduct(this.state.sid, this.state.newProductName, this.state.newProductPic, this.state.newProductDesc).then(res => {
            message.success("产品添加成功！");
            this.props.history.push("/myStore/" + this.state.sid);
        })
    }
    deleteProduct = (gid) => {
        ProductService.eraseProduct(this.state.sid, gid).then(res => {
            message.success("产品删除成功！");
            this.props.history.push("/myStore/" + this.state.sid);
        })
    }
    updateProductNameChange = (index, event) => {
        console.log(event.target.value, index)
        let updateProductInfo = this.state.updateProductInfo;
        updateProductInfo[index].updateProductName = event.target.value;
        this.setState({updateProductInfo: updateProductInfo});
    }
    updateProductDescChange = (index, event) => {
        let updateProductInfo = this.state.updateProductInfo;
        updateProductInfo[index].updateProductDesc = event.target.value;
        this.setState({updateProductInfo: updateProductInfo});
    }
    updateProductPicChange = (index, event) => {
        let updateProductInfo = this.state.updateProductInfo;
        updateProductInfo[index].updateProductPic = event.target.value;
        this.setState({updateProductInfo: updateProductInfo});
    }
    updateProduct = (gId, gName, pic, desc) => {
        console.log(this.state)
        ProductService.updateProduct(this.state.sid, gId, gName, pic, desc).then(res => {
            // if(res.status === )
            message.success("产品修改成功！");
            this.props.history.push("/myStore/" + this.state.sid);
        })
    }

}

StoreManage.propTypes = {};

export default StoreManage;